import React from 'react';
import {Form, Input, Button, Modal, Message, DatePicker, Icon, Table } from 'antd';

const FormItem = Form.Item;

let RoomList = React.createClass({
  contextTypes: {
    router: React.PropTypes.object
  },

  getInitialState() {
    return {
      data: [],
      pagination: {
        current: 1,
        pageSize: 10
      }
    }
  },

  componentDidMount() {
    this.handleSearch()
  },

  handleTableChange(pagination) {
    const pager = this.state.pagination;
    pager.current = pagination.current;
    this.setState({
      pagination: pager
    });
    this.fetch();
  },

  fetch() {

    let forms = this.props.form.getFieldsValue();
    let page = this.state.pagination.current;
    let params = Object.assign({}, {pageSize: 10, currentPage: page}, forms)
    let _me = this
    Utils.sendAjax({
      url: '/rent/cancel/list',
      data: JSON.stringify(params),
      callback: function(result) {
        if (result.code == '200') {
          _me.setState({
            data: result.data,
            pagination: result.page
          })
        } else {
          Message.error(result.message, 10)
        }
      }
    })
  },

  handleSearch() {
    this.setState({
      pagination: {
        current: 1
      }
    })
    this.fetch();
  },
  handleReset() {
    this.props.form.resetFields();
  },
  rowKey(data) {
    return data.id;
  },
  linkTo(data){
    this.context.router.push(data.url);
  },
  render() {

    const { getFieldProps } = this.props.form;
    const columns = [
      {
        title: '房间名称',
        dataIndex: 'roomName',
        render: (text, record) => {
            // 房间名称
            let roomNames = record.roomNames;
            let roomNamesArry = [];
            let length = roomNames.length;
            roomNames.forEach((item, index) => {
              let content = length == index +1 ?
                (
                  <span>{item}</span>
                ):(
                <span>{item}<span className="ant-divider" /></span>
              );
              roomNamesArry.push(content);
            });
            return roomNamesArry
        }
      },
      {
        title: '租客姓名',
        dataIndex: 'renterName'
      },
      {
        title: '联系方式',
        dataIndex: 'renterPhone'
      },
      {
        title: '退房日期',
        dataIndex: 'rentCancelDay'
      },
      {
        title: '实际退款额',
        dataIndex: 'refundMoney'
      },
      {
        title: '备注',
        dataIndex: 'remark'
      },
      //{
      //  title: '操作',
      //  render: (text, record) => {
      //    return (
      //      <a  href="javascript:;" onClick={this.linkTo.bind(this, {url:'/landlord/rentManage/checkOutList/detail'})}>查看详情</a>
      //    )
      //  }
      //},
    ];
    /*<Form inline>
     <FormItem  label="关键字">
     <Input {...getFieldProps('ownerName') } placeholder="业主/房源"/>
     </FormItem>
     <FormItem label="退房时间">
     <DatePicker  {...getFieldProps('startTime')} placeholder="开始日期" style={{width: 162}}/>&nbsp;至&nbsp;
     <DatePicker  {...getFieldProps('endTime')} placeholder="结束日期" style={{width: 162}}/>
     </FormItem>
     <FormItem>
     <Button type="primary" onClick={this.handleSearch} style={{marginRight: 20}}>查询</Button>
     <Button type="default" onClick={this.handleReset} >重置</Button>
     </FormItem>
     </Form>*/
    return (
      <div>
        <div className="search-bar">
          <Form inline>
            <FormItem  label="租客姓名">
              <Input {...getFieldProps('renterName') } placeholder="租客名"/>
            </FormItem>
               <FormItem  label="联系方式">
              <Input {...getFieldProps('renterPhone') } placeholder="联系方式"/>
            </FormItem>
            <FormItem label="退房日期">
              <DatePicker  {...getFieldProps('startTime')} placeholder="开始日期" style={{width: 162}}/>&nbsp;至&nbsp;
              <DatePicker  {...getFieldProps('endTime')} placeholder="结束日期" style={{width: 162}}/>
            </FormItem>
            <FormItem>
              <Button type="primary" onClick={this.handleSearch} style={{marginRight: 20}}>查询</Button>
              <Button type="default" onClick={this.handleReset} >重置</Button>
            </FormItem>
          </Form>
        </div>
        <Table rowKey={this.rowKey} columns={columns} dataSource={this.state.data}
               onChange={this.handleTableChange}
               pagination={this.state.pagination}/>
      </div>
    );
  }
});
RoomList = Form.create()(RoomList);
export default RoomList